<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge 01</title>
    <link rel="stylesheet" href="../../style.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <header class="nav">
        <a href="/">
          <img src=" /logo.svg" alt="logo" />
        </a>
        <a href="https://jsmastery.com/all-courses" target="_blank"
          >GSAP Course</a
        >
      </header>

      <div class="content">
        <div class="arrow">
          <a href="../../index.html">
            <img src=" /arrow.svg" alt="arrow" />
          </a>
        </div>

        <section>
          <h1>Challenge 01</h1>
          <p>
            You made a card fade in, scale up, and float smoothly. That’s
            already more fun. But let’s add some magic to it.
          </p>
          <p></p>
          <p>
            Challenge yourself to create a pulsing glow animation using GSAP.
            Yes, make the cube glow. Make it softly pulse with light. Nothing
            crazy, just a smooth glowing effect that makes it feel more cool.
          </p>
        </section>
      </div>

      <div class="demo">
        <section class="flex-center">
          <div class="card" />
        </section>
      </div>
    </main>

    <!-- GSAP CDN -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

    <script type="module" src="script.js"></script>
  </body>
</html>
